<template>
  <!--职工-- 课程销售 -->
  <div class="sale">
    <van-tabs v-model="activeName" color="#6385D7" @change="tabChange">
      <van-tab title="所有课程" name="all">
        <van-list
          v-model="course.loading"
          :finished="course.finished"
          finished-text="没有更多数据了"
          @load="onLoad"
          :immediate-check="false"
          :error="course.error"
        >
          <div
            class="flex-row item-lists"
            v-for="(item,index) in list"
            :key="index"
            @click="bindTCourse(item)"
          >
            <van-image width="116" height="116" :src="item.courseImg" fit="contain" />
            <div class="column-space-between" style="width:68%;padding:7px;height:102px;">
              <div>
                <p class="text-p2" style="font-weight: 600;margin:0;">{{item.courseName}}</p>
                <p class="text-p3" v-html="item.courseDescribe"></p>
              </div>
              <div style="text-align:left">
                <p
                  style="color: rgba(68, 68, 68, 0.45);font-size: 10px;text-align: left;margin-bottom:6px"
                  v-if="item.isAllSee ==1"
                >面向全部用户</p>
                <p
                  style="color: rgba(68, 68, 68, 0.45);font-size: 10px;text-align: left;margin-bottom:6px"
                  v-if="item.isAllSee ==0"
                >{{item.campusName}}</p>
                <span style="color:#F40404;font-size:13px;">￥{{item.intervalPrice|minPriceFilter}}</span>
                <span
                  v-if="item.makingPrice != ''"
                  class="line-m"
                  style="color: rgba(16, 16, 16, 0.45);font-size: 12px;"
                >￥{{item.makingPrice}}</span>
              </div>
            </div>
          </div>
        </van-list>
      </van-tab>
      <!-- 课程------------------------------订单-------------------------------------订单 -->
      <van-tab title="课程订单" name="sale" style=" background-color: #f7f7f7;">
        <van-list
          v-model="order.loading"
          :finished="order.finished"
          finished-text="没有更多数据了"
          @load="loadOrder"
          :immediate-check="false"
          :error="order.error"
        >
          <!-- <div v-if="order.length!=0"> -->
          <div
            class="flex-column"
            style="background-color:#fff;margin-top:10px;"
            v-for="(item,index) in orderList"
            :key="index"
          >
            <div class="row-space-between" style="height:35px;">
              <p class="p-orderid">订单号：{{item.order_id}}</p>
              <p class="order-type" v-if="item.stateID == '11'">待付款</p>
              <p class="order-type" v-if="item.stateID == '2'">已付款</p>
              <p class="order-type" v-if="item.stateID == '9'||item.stateID == '10'">交易关闭</p>
            </div>
            <p style="font-size: 12px;margin: 0 0 7px 14px;">客户账号：{{item.customer_account}}</p>
            <div class="column-center">
              <div class="list-item flex-row">
                <van-image width="116" height="116" fit="contain" :src="item.course_img"></van-image>
                <div class="column-space-between course-detail">
                  <div>
                    <p class="text-p2">{{item.course_name}}</p>
                    <p class="text-p3">
                      <span v-if="item.course_type!=''">{{item.course_type}}-</span>
                      <van-icon name="location" size="10" color="#F40404" />
                      {{item.course_address}}
                    </p>
                  </div>
                  <div>
                    <p class="text-p3">已选：{{item.specification}}</p>
                    <div class="row-space-between" style="text-align:left">
                      <span style="color:#F40404;">￥{{item.original_price|fixed}}</span>
                      <span style="color: rgba(16, 16, 16, 0.65);font-size: 10px;">x1</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div
              class="flex-row count"
              style="color: rgba(16, 16, 16, 0.65);margin:15px 18px 0 0;"
            >优惠：￥{{item.preferential_ratio|preferential(item)}}</div>
            <div
              v-if="item.stateID == '9' || item.stateID == '10'|| item.stateID == '11'"
              class="flex-row count"
            >
              待付金额：
              <span style="color:#F40404;">￥{{item.preAmount|fixed}}</span>
            </div>
            <div v-if=" item.stateID == '2'" class="flex-row count">
              实收金额：
              <span style="color:#F40404;">￥{{item.real_amount|fixed}}</span>
            </div>
            <div v-if=" item.stateID == '2'" class="flex-row count">收款账户：{{item.receiveName}}</div>
            <div
              v-if=" item.stateID == '11'||item.stateID == '12'"
              class="row-space-around btn-content"
            >
              <van-button
                v-if="item.pay_method.indexOf(1)>=0"
                color="#59BDC3"
                text="查看收款二维码"
                size="small"
                plain
                style="width:42%;height:37px;border-radius:6px;"
                @click="showCode(item.course_id)"
              />
              <van-button
                color="#59BDC3"
                text="确认收款"
                size="small"
                style="height:37px;border-radius:6px;"
                :style="{width: item.pay_method == 3 ? '90%' : '42%'} "
                @click="getCollection(item)"
              />
            </div>
            <p v-if="item.stateID == '2'" class="item-p-time">确认时间：{{item.order_update_time}}</p>
            <p
              v-if="item.stateID == '9'||item.stateID == '10'"
              class="item-p-time"
            >关闭时间：{{item.order_update_time}}</p>
          </div>
          <!-- </div> -->
        </van-list>
      </van-tab>
    </van-tabs>
    <!-- 确认收款弹窗 -->
    <van-popup
      v-model="collectionPop"
      style="width:75%;border-radius:4px"
      closeable
      class="column-align-center"
    >
      <p style="color: rgba(0, 0, 0, 1);font-size: 18px;">请选择收款账户</p>
      <p
        style="color: rgba(136, 136, 136, 1);font-size: 15px;margin-top:10px"
      >待付金额：￥{{collectionList.price|fixed}}</p>
      <van-button
        plain
        color="#59BDC3"
        size="small"
        class="pay-button"
        v-for="(item,index) in receiveList"
        :key="index"
        @click="accountConfirm(item)"
      >{{item.payeeName}}</van-button>
      <div style="width:100%;height:40px;" />
    </van-popup>
  </div>
</template>

<script>
import { getTOrders, getReceiveQRcode, receiptConfirm } from "@/api/order";
import { TShowCourse } from "@/api/course";
import { mapGetters } from "vuex";
import { Toast, Dialog } from "vant";
export default {
  data() {
    return {
      activeName: "all",
      orderList: [],
      list: [],
      collectionPop: false,
      course: {
        page: 1,
        size: 8,
        total: null,
        lastPage: null,
        loading: false,
        finished: false,
        error: false
      },
      order: {
        page: 1,
        size: 8,
        total: null,
        lastPage: null,
        loading: false,
        finished: false,
        error: false
      },
      collectionList: {
        price: 0.0,
        orderID: ""
      },
      receiveList: []
    };
  },
  methods: {
    // 订单--展示收款二维码
    async showCode(value) {
      Toast.loading({
        forbidClick: true,
        duration: 0
      });
      const result = await getReceiveQRcode({
        phoneNumber: this.phone,
        campusID: this.campusID,
        courseID: value
      });
      if (result.result == "OK" && result.data.length != 0) {
        this.list = result.data;
        this.$router.push({
          name: "PaymentCode",
          params: { course_id: value }
        });
        Toast.clear();
      } else {
        Toast.fail("暂无收款二维码信息！");
      }
    },
    // 课程--点击课程跳转
    bindTCourse(value) {
      this.$store.commit("setCourse", value);
      this.$router.push({
        path: "buy"
      });
    },
    // 订单--获取收款账户信息
    async getCollection(value) {
      Toast.loading({
        forbidClick: true,
        duration: 0
      });
      let cash = value.pay_method.indexOf(3);
      let online = value.pay_method.indexOf(2);
      let offline = value.pay_method.indexOf(1);

      if (cash >= 0 && offline >= 0) {
        // 现金&线下移动支付
        this.receiveList = [
          {
            receive_id: "0",
            payeeName: "现金",
            telephone: "",
            collection_explain: "",
            QRCode: ""
          }
        ];
        const result = await getReceiveQRcode({
          phoneNumber: this.phone,
          campusID: this.campusID,
          courseID: value.course_id
        });
        if (result.result == "OK" && result.data.length != 0) {
          this.receiveList = this.receiveList.concat(result.data);
          this.collectionPop = true; //展示账户弹窗
          Toast.clear();
        } else if (result.data.length == 0) {
          Toast.clear();
        } else {
          Toast.fail("获取收款账户错误！");
        }
        this.collectionPop = true;
      } else if (cash >= 0) {
        // 仅现金
        this.receiveList = [
          {
            receive_id: "0",
            payeeName: "现金",
            telephone: "",
            collection_explain: "",
            QRCode: ""
          }
        ];
        this.collectionPop = true;
        Toast.clear()
      } else if (offline >= 0) {
        // 仅线下移动
        const result = await getReceiveQRcode({
          phoneNumber: this.phone,
          campusID: this.campusID,
          courseID: value.course_id
        });
        if (result.result == "OK" && result.data.length != 0) {
          this.receiveList = result.data;
          this.collectionPop = true; //展示账户弹窗
          Toast.clear();
        } else if (result.data.length == 0) {
          Toast.fail("暂无收款信息！");
        } else {
          Toast.fail("获取收款账户错误！");
        }
        this.collectionPop = true;
      } else {
        Toast.clear();
      }
      this.collectionList.price = value.preAmount;
      this.collectionList.orderID = value.order_id;
    },
    // 订单--确认订单收款
    async accountConfirm(value) {
      Toast.loading({
        forbidClick: true,
        duration: 0
      });
      let pay_method = "";
      if (value.receive_id == 0) {
        pay_method = 3;
      } else {
        pay_method = 1;
      }
      const result = await receiptConfirm({
        receive_id: value.receive_id, //收款方式
        order_id: this.collectionList.orderID, //订单id
        real_amount: this.collectionList.price, //实际金额
        pay_method: pay_method
      });
      if (result.result == "OK") {
        //获取课程订单
        const result = await getTOrders({
          phoneNumber: this.phone,
          campusID: this.campusID,
          page: this.order.page,
          size: this.order.size
        });
        if (result.result == "OK") {
          this.orderList = result.data;
          this.order.total = result.total;
          this.order.lastPage = result.lastpage;
          if (result.total == 0) {
            this.order.finished = true;
          }
        } else {
          this.order.finished = true;
        }
        Toast.success("订单已完成");
        this.collectionPop = false;
      } else {
        Toast.clear();
      }
    },
    // 分页 加载更多数据
    async onLoad() {
      if (
        this.course.lastPage != 0 &&
        this.course.page < this.course.lastPage
      ) {
        this.course.page += 1;
        const result = await ShowCourse({
          showCourse: "1",
          page: this.course.page,
          size: this.course.size
        });
        if (result.result == "OK") {
          this.list = this.list.concat(result.data.data);
          this.course.total = result.data.total;
          this.course.lastPage = result.data.lastpage;
        } else {
          this.course.error = true;
        }
      }
      // 加载状态结束
      this.course.loading = false;

      // 数据全部加载完成
      if (this.course.lastPage == this.course.page) {
        this.course.finished = true;
      }
    },
    // 订单分页
    async loadOrder() {
      if (this.order.lastPage != 0 && this.order.page < this.order.lastPage) {
        this.order.page += 1;
        const result = await getTOrders({
          phoneNumber: this.phone,
          campusID: this.campusID,
          page: this.order.page,
          size: this.order.size
        });
        if (result.result == "OK") {
          this.orderList = this.orderList.concat(result.data);
          this.order.total = result.total;
          this.order.lastPage = result.lastpage;
        } else if (result.total == 0) {
          this.order.finished = true;
        } else {
          this.order.error = true;
        }
      }
      // 加载状态结束
      this.order.loading = false;

      // 数据全部加载完成
      if (this.order.lastPage == this.order.page) {
        this.order.finished = true;
      }
    },
    // tab切换事件
    tabChange(value) {
      if (value == "sale") {
        this.$store.commit("setSaleIndex", "sale");
      } else {
        this.$store.commit("setSaleIndex", "all");
      }
    }
  },
  async created() {
    Toast.loading({
      forbidClick: true,
      duration: 0
    });
    this.activeName = this.saleIndex;
    // 获取课程列表
    const res = await TShowCourse({
      page: this.course.page,
      size: this.course.size,
      campusID: this.campusID,
      phoneNumber: this.phone
    });
    if (res.result == "OK") {
      this.list = res.data.data;
      this.course.total = res.data.total;
      this.course.lastPage = res.data.lastpage;
    } else {
      this.course.finished = true;
    }
    console.log(res);

    //获取课程订单
    const result = await getTOrders({
      phoneNumber: this.phone,
      campusID: this.campusID,
      page: this.order.page,
      size: this.order.size
    });
    console.log(result);

    if (result.result == "OK") {
      this.orderList = result.data;
      this.order.total = result.total;
      this.order.lastPage = result.lastpage;
      if (result.total == 0) {
        this.order.finished = true;
      }
    } else {
      this.order.finished = true;
    }

    Toast.clear();
  },
  computed: {
    ...mapGetters({
      phone: "getPhone",
      campusID: "getCampusID",
      saleIndex: "getSaleIndex"
    })
  },
  filters: {
    preferential: (value, item) => {
      if (value == undefined) {
        return 0.0;
      } else {
        return (
          (value.replace("%", "") / 100) *
          parseInt(item.original_price) *
          -1
        ).toFixed(2);
      }
    },
    minPriceFilter(value) {
      if (value.indexOf("-") > 0) {
        return value.substring(0, value.indexOf("-"));
      } else {
        return value;
      }
    },
    fixed(value) {
      return parseFloat(value).toFixed(2);
    }
  }
};
</script>

<style scoped>
.sale {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: #f7f7f7;
}
.item-lists {
  margin: 10px;
  background-color: #fff;
  border-radius: 4px;
  height: 116px;
}

.text-p2 {
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  text-align: left;
  margin: 3px 0 3px 0;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text-p3 {
  margin: 0;
  color: rgba(16, 16, 16, 0.65);
  font-size: 10px;
  text-align: left;
  line-height: 12px;
  width: 100%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}
.list-item {
  width: 95%;
  height: 116px;
  background-color: #fff;
  line-height: 20px;
  border-radius: 4px;
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  font-family: Arial;
  border: 1px solid rgba(255, 255, 255, 0);
}
.p-orderid {
  color: rgba(58, 58, 58, 0.65);
  font-size: 12px;
  text-align: left;
  margin-left: 14px;
}
.count {
  justify-content: flex-end;
  margin: 4px 18px 0 0;
  font-size: 12px;
}
.course-detail {
  background-color: #fafafa;
  padding: 7px;
  width: 70%;
}
.pay-button {
  width: 60%;
  border-radius: 5px;
  height: 38px;
  margin-top: 15px;
}
.item-p-time {
  color: rgba(16, 16, 16, 0.65);
  font-size: 12px;
  text-align: right;
  padding-right: 14px;
  margin-top: 15px;
}
.order-type {
  font-size: 13px;
  margin-right: 14px;
  color: black;
}
.btn-content {
  padding: 15px 0;
  border-top: 1px solid rgba(235, 235, 235, 1);
  margin-top: 15px;
}
</style>
